import './index.less'
import { Tag, Select,Button ,Table} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react'
import { useDispatch, useSelector, QuestionModelState, Effect,useHistory } from 'umi';
import {getQuestions_newItem} from '@/utils/interface'
import React from 'react';
const { CheckableTag } = Tag;
const { Option } = Select;
const watchQuestions: React.FC = () => {
    let dispatch = useDispatch();
    let history=useHistory();
    useEffect(() => {
        //调用数据
        dispatch({
            type: "question/getSubject"
        })
        dispatch({
            type: "question/getExamType"
        })
        dispatch({
            type: "question/getGetQuestionsType"
        })
        dispatch({
            type:'question/getQuestions_new'
        })
    }, [])
    //获取数据
    const { questionsType,subject,examType,getQuestions_newlist } = useSelector((model: { question: QuestionModelState }) => model.question)
    const tagsData = subject.map((item, index) => { return { ...item, key: index } })
    let [falg,setfalg] =useState (false);
    //课程类型
    let [subject_id,setSubject_id]=useState(['']);
    //课题类型组件
    class HotTags extends React.Component {
        state = {
            selectedTags: [''],
        };

        handleChange(tag: string) {
            if (tag != 'all') {
                if(subject_id[0]==tag){
                    setSubject_id([''])
                }else{
                    setSubject_id([tag])
                }
            } else {
                setfalg(!falg);
                if (falg) {
                    setSubject_id([''])
                } else {
                    let subjectText=tagsData.map(item=>item.subject_id);
                    setSubject_id(subjectText)  
                }
            }
        }
        render() {
            return (
                <>
                    <div style={{ marginRight: 8 }}>课题类型:</div>
                    <div style={{width:'90%'}}>
                        <CheckableTag
                            key='all'
                            checked={falg}
                            onChange={checked => this.handleChange('all')}
                        >
                            all
                        </CheckableTag>
                        {tagsData.map(tag => (
                            <CheckableTag
                                key={tag.key}
                                checked={subject_id.indexOf(tag.subject_id) > -1}
                                onChange={checked => this.handleChange(tag.subject_id)}
                            >
                                {tag.subject_text}
                            </CheckableTag>
                        ))}
                    </div>
                </>
            );
        }
    }
    //考试类型
    let [exam_id,setExam_id]=useState('');
    const exam_Type=(value: string)=>{
        console.log(value);
        setExam_id(value);   
    }
    //题目类型
    let [questions_type_id,setQuestions_type_id]=useState('');
    const questions_Type=(value: string)=>{
        console.log(value);
        setQuestions_type_id(value);
    }
    //查询按钮
    const searchCondition=()=>{
        console.log(questions_type_id,subject_id,exam_id);  
        dispatch({
            type:'question/getQuestions_condition',
            payload:{questions_type_id,subject_id:subject_id.join(),exam_id}
        })
    }
    return (<div className="watchQuestions">
        <h2>查看试题</h2>
        <div className="watchQuestions_connten_type">
            <div className='subject_type'>
                <HotTags />
            </div>
            <div className='type_all'>
                <div>
                    <span>考试类型:</span>
                    <Select style={{ width: '60%' }} allowClear onChange={exam_Type}>
                        {
                            examType.length>0&&examType.map(item=>{
                                return(
                                     <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>
                                )
                            })
                        }
                    </Select>
                </div>
                <div>
                    <span>题目类型:</span>
                    <Select style={{ width: '60%' }} allowClear onChange={questions_Type}>
                        {
                            questionsType.length>0&&questionsType.map(item=>{
                                return(
                                     <Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Option>
                                )
                            })
                        }
                    </Select>
                </div>
                <Button type="primary" icon={<SearchOutlined />} onClick={searchCondition}>查询</Button>
            </div>
        </div>
        <div className="watchQuestions_connten_data">
            <div className='looktestlistbox'>
            {
                getQuestions_newlist.map((item: getQuestions_newItem) => {
                return <div className='itemsbox' key={Math.random().toString(16).substr(2, 6)}>
                    <p className='itemtitle'>{item.title}</p>
                    <p>
                    <Tag color="blue">{item.questions_type_text}</Tag>
                    <Tag color="geekblue">{item.subject_text}</Tag>
                    <Tag color="orange">{item.exam_name}</Tag>
                    </p>
                    <p style={{ color: 'rgb(29, 145, 223)' }}>{item.user_name} 发布</p>
                    <a style={{ color: '#4395FF' }} onClick={()=>{
                    history.push(`/main/editQuestions/${item.questions_id}`)
                    }} >编辑</a>
                </div>
                })
            }
            </div>
        </div>
    </div>)
}
export default watchQuestions